import * as PIXI from 'pixi.js'
import { btnsModule } from '@renderer/utils/bundle'
import { getPixi, setPixi } from '@renderer/store/modules/usePixiStore'
import { setColorMatrix } from '@renderer/store/modules/useFilterStore'
import { cutBtnMouseDown } from '@renderer/utils/events'
import useCardsStore from '@renderer/store/modules/useCardsStore'

export default async (): Promise<PIXI.Container<PIXI.ContainerChild>> => {
  const cardsStore = useCardsStore()
  const container = new PIXI.Container()
  const diyBtn = await btnsModule('diy_btn') // diy按钮
  diyBtn.anchor.set(0.5)
  const illBtn = await btnsModule('ill_btn') // 图鉴按钮
  illBtn.anchor.set(0.5)
  if (cardsStore.from !== 'cards') {
    illBtn.visible = false
  }
  const diyBtnText = new PIXI.Text({
    text: 'DIY',
    style: {
      fontFamily: 'XQFont',
      fontSize: 28,
      fill: 0xffffff,
      align: 'center',
      lineHeight: diyBtn.height,
    },
  })
  diyBtnText.anchor.set(0.5)
  diyBtnText.position.set(-diyBtn.width / 4 + 2, -2)
  const illBtnText = new PIXI.Text({
    text: '图鉴',
    style: {
      fontFamily: 'XQFont',
      fontSize: 28,
      fill: 0xffffff,
      align: 'center',
      lineHeight: illBtn.height,
    },
  })
  illBtnText.anchor.set(0.5)
  illBtnText.position.set(illBtn.width / 4 - 2, -2)
  container.addChild(diyBtn, illBtn)
  container.addChild(diyBtnText, illBtnText)
  const upSprite = getPixi('upSprite')
  container.position.set(upSprite.width * 0.12, upSprite.height * 0.635 - container.height / 8)
  setPixi('cutBtn', container)
  setPixi('diyBtn', diyBtn)
  setPixi('illBtn', illBtn)
  const colorMatrix = new PIXI.ColorMatrixFilter()
  container.filters = [colorMatrix]
  cutBtnMouseDown.whiteAdd(container)
  setColorMatrix('cutBtn', [colorMatrix])
  return container
}
